<template>
    <div class="app">
        <div class="head">
            <p>用户详情</p>
        </div>
        <div class="back">
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left"
                    style="background: transparent;border: none; color: black;padding-left: 6px;"
                    @click="goBack()">返回主界面</el-button>
            </el-button-group>
        </div>
        <div class="user-card">
            <div size="100">
                <img :src="user.avatar" alt="User Avatar">
            </div>
            <h2 class="user-name">{{ user.username }}</h2>
        </div>
        <a class="logout-btn" @click="logout">退出登录</a>
    </div>
</template>
  
<script>
export default {
    name: "userDetails",
    data() {
        return {
            user: []
        };
    },

    mounted() {
       
    },
    created() {
     // 获取数据
        const userStr = window.sessionStorage.getItem("user");
        // console.log(userStr); // 检查返回的字符串是否是有效的 JSON 字符串
        this.user = JSON.parse(userStr);
 
  },

    methods: {
        logout() {

            this.$confirm('你将退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'my-message-box'
            }).then(() => {
                // 处理退出登录逻辑
                // 1. 清空 token
                window.sessionStorage.removeItem("token");
                window.sessionStorage.removeItem("user");
                // 2. 跳转到登录页面   /login为路由配置中的路由地址
                this.$router.push("/login");

                this.$message({
                    type: 'success',
                    message: '账号退出成功!',
                    customClass: 'my-message'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消',
                    customClass: 'my-message',
                });
            });
        },



        //     // 处理退出登录逻辑
        //   // 1. 清空 token
        //   window.sessionStorage.removeItem("token");
        //   window.sessionStorage.removeItem("user");
        //   // 2. 跳转到登录页面   /login为路由配置中的路由地址
        //   this.$router.push("/login");
        //   this.$message({
        //       message: '退出登录成功',
        //       type: 'success'
        //     });

        // 返回
        goBack() {
            // window.history.back();
            this.$router.push("/user");

        },

    }
}
</script>
  
<style scoped>
.app {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
}

.app .head {
    width: 100%;
    height: 50px;
    background-color: rgb(235, 24, 67);
    color: aliceblue;
    text-align: center;
}

.user-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin-top: 20px;
    padding-top: 50px;
    margin: 0 auto;
    /* padding: 24px; */
}

.user-card img{
    width: 60px;
  height: 60px;
  border-radius: 50%;
}
.user-name {
    margin-top: 16px;
}

.logout-btn {
    margin-top: 24px;
    background-color: antiquewhite;
    margin: 0 auto;
    /* width: 30%; */
}

</style>